@use "../../default" as theme;
@use "../../Icon/style/default" as Icon;
.pf-NumberInput{
	@include theme.input-widget-wrap(
		$-height:theme.$NumberInput-height,
		$-active-color:theme.$NumberInput-primary-color,
		$-border-color:theme.$NumberInput-border-color,
		$-disabled-color:theme.$NumberInput-disabled-color,
		$-disabled-opacity:theme.$NumberInput-disabled-opacity,
		$-radius:theme.$NumberInput-radius,
		$-round-padding:theme.$NumberInput-round-padding,
		$-transition:theme.$NumberInput-transition,
		$-shadow:theme.$NumberInput-shadow,
		$-real:pf-NumberInput_input,
		$-vertical-align:theme.$vertical-align,
	);
	&.pf--shape-round{
		padding-right:0;
		.pf-NumberInput_control{
			width: theme.$NumberInput-control-width + 3;
		}
	}
	&.pf--shape-noBorder{
		.pf-NumberInput_control{
			border:1px solid theme.$NumberInput-border-color;
			border-radius: theme.$NumberInput-radius;
		}
	}
	&.pf--disabled{
		>.pf-NumberInput_icon{
			cursor:not-allowed;
		}
	}
}
@include theme.input-widget(
	$-prefix:pf-NumberInput,
	$-font-size:theme.$NumberInput-content-size,
	$-padding:0 theme.$NumberInput-gap,
	$-color:theme.$NumberInput-color,
	$-hint-color:theme.$NumberInput-hint-color,
	$-disabled-opacity:theme.$NumberInput-disabled-opacity,
);
.pf-NumberInput_control{
	flex-shrink:0;
	display:inline-flex;
	flex-direction:column;
	width: theme.$NumberInput-control-width;
	height:100%;
	border-left:1px solid theme.$NumberInput-border-color;
}
.pf-Icon{
	&.pf-NumberInput_stepIcon{
		width:100%;
		height:50%;
		font-size: theme.$NumberInput-step-icon-size;
		color: theme.$NumberInput-icon-color;
		cursor:pointer;
		&:first-child{
			border-bottom:1px solid theme.$NumberInput-border-color;
		}
		&.pf--enable{
			&:hover{
				color: theme.$NumberInput-primary-color;
			}
		}
		&.pf--disabled{
			color: theme.$NumberInput-icon-disabled-color;
			cursor:not-allowed;
		}
	}
	&.pf-NumberInput_clear,&.pf-NumberInput_icon{
		flex-shrink:0;
		font-size: theme.$NumberInput-icon-size;
		color: theme.$NumberInput-icon-color;
	}
	&.pf-NumberInput_icon{
		&.pf--prefix{
			margin-left: theme.$NumberInput-gap;
		}
		&.pf--suffix{
			margin-right: theme.$NumberInput-gap;
		}
	}
	&.pf-NumberInput_clear{
		margin-right: theme.$NumberInput-gap;
		cursor:pointer;
	}
}